<!--
 * @Description: 第十二章 认识组件&Vue3生命周期 组件生命周期
 * @Author: IA ia@ker.center
 * @Date: 2025-02-13 11:41:56
-->

<template>
  <div>
    <p>我是B组件</p>
    <div>
      <p></p>
      <div ref="div1">str1: {{ str1 }}</div>
      <button @click="editStr1">修改str1</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
} from 'vue'

// beforeCreate 和 created 在setup语法糖模式不这两个生命周期由setup去代替
// 渲染 也称 挂载

console.log('B setup')

const str1 = ref<string>('字符串Basic')

const div1 = ref<HTMLDivElement>()

const editStr1 = () => {
  str1.value = '字符串Basic 被修改啦！'
}

// 创建
// onBeforeMount读不到DOM
onBeforeMount(() => {
  console.log('创建之前=======> ', div1.value)
})
// onMounted可以读DOM
onMounted(() => {
  console.log('创建完成后=======> ', div1.value)
})

// 更新
// onBeforeUpdate获取更新前的DOM
onBeforeUpdate(() => {
  console.log('更新组件之前=======> ', div1.value?.innerText)
})

// onUpdated获取更新后的DOM
onUpdated(() => {
  console.log('更新组件完成后=======> ', div1.value?.innerText)
})

// 卸载
onBeforeUnmount(() => {
  console.log('卸载之前=======> ', div1.value)
})

onUnmounted(() => {
  console.log('卸载完成后=======> ', div1.value)
})

// onRenderTracked 和 onRenderTriggered 是调试用的
// 收集依赖去触发的一个钩子
onRenderTracked((e) => {
  console.log('onRenderTracked: ', e)
})

onRenderTriggered((e) => {
  console.log('onRenderTriggered: ', e)
})
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
